<template>
    <el-table ref="xklTable" :data="table.list" v-bind="{ ...table.element, ...$attrs }" v-loading="table.loading"
        v-on="table.events || {}">
        <el-table-column v-if="!!table.selection" type="selection" v-bind="table.selection"></el-table-column>
        <el-table-column v-if="!!table.index" type="index" v-bind="table.index">
        </el-table-column>
        <el-table-column v-for="col in table.columns" :key="col.prop" :prop="col.prop" :label="col.label"
            v-bind="col.element">
            <template #default="{ row }">
                <template v-if="slots[col.prop]">
                    <slot :name="col.prop" :row="row"></slot>
                </template>
                <el-tag v-else-if="col.tags" :type="tag(col, row).type">
                    <span v-if="col.dict">
                        {{ dictLabel(col, row) }}
                    </span>
                    <span v-else>{{ row[col.prop] }}</span>
                </el-tag>
                <span v-else-if="col.dict">
                    {{ dictLabel(col, row) }}
                </span>
                <span v-else>{{ row[col.prop] }}</span>
            </template>
        </el-table-column>
        <el-table-column v-if="!!table.operation" v-bind="table.operation">
            <template #default="{ row }">
                <div class="action_col">
                    <slot name="_action" :row="row"></slot>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <div v-if="table.__is_pagination" class="pagination-box">
        <el-pagination @size-change="table.sizeChange" @current-change="table.pageChange" small
            :current-page="table.page" :page-sizes="[10, 20, 50, 100]" :page-size="table.pageSize" background
            layout="total, sizes, prev, pager, next, jumper" :total="table.totalCount" />
    </div>
</template>
<script lang="ts" setup>
import { computed, ref, useSlots } from 'vue';
import { useDict } from './hooks';
import { TableInstance } from 'element-plus'
defineOptions({ name: 'XklTable' })
const props = defineProps(['table'])
const emit = defineEmits(['selection-change', 'virtual-select', 'virtual-select-all'])

const slots = useSlots()

const { table } = props
const xklTable = ref<TableInstance>()

const dictTypes = table.columns.map(res => res.dict).filter(res => !!res)

const dictStore = ref({})

dictTypes.forEach(dict => {
    const { list } = useDict(dict)
    dictStore.value[dict] = list
})

const dictLabel = computed(() => {
    return (col, row) => {
        if (dictStore.value[col.dict]) {
            const item = dictStore.value[col.dict].find(res => res.dictValue == row[col.prop]) || {}
            return item.dictLabel
        }
        return ''
    }
})

const tag = computed(() => {
    return (col, row) => {
        const item = col.tags.find(tag => tag.value === row[col.prop])

        return item || {}
    }
})
table.getRef = () => {
    return xklTable.value
}

</script>
<style lang="scss" scoped>
.pagination-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.action_col {
    display: flex;
    justify-content: center;
    gap: 6px;
}
</style>